<template>
  <div class="login">
    <div class="login_box">
      <div class="app_name"><span>设备管理系统</span></div>

      <van-form @submit="onSubmit" @failed="onFailed">
        <van-cell-group inset>
          <van-field
            v-model="form.username"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="form.password"
            :type="isPassWord ? '' : 'password'"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          >
            <template #button>
              <van-icon
                :name="isPassWord ? 'eye-o' : 'closed-eye'"
                @click="isPassWord = !isPassWord"
              />
            </template>
          </van-field>

          <van-field
            v-model="form.validateCode"
            center
            clearable
            label="验证码"
            placeholder="请输入验证码"
            :rules="[{ required: true, message: '请输入验证码' }]"
          >
            <template #button>
              <img
                width="100"
                height="40"
                :src="codeUrl"
                @click="getCode"
                class="login-code-img"
              />
              <!-- <van-button size="small" type="primary">发送验证码</van-button> -->
            </template>
          </van-field>
        </van-cell-group>
        <div style="margin: 16px">
          <van-button round block type="primary" native-type="submit" :loading="loading">
            登录
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import Cookies from 'js-cookie';
import { useRoute, useRouter } from 'vue-router';
import { showNotify } from 'vant';
const router = useRouter();
const route = useRoute();
import { getCaptchaAPi, loginAPi } from '@/api/login.js';
const form = reactive({
  username: 'admin',
  password: 'Admin123!',
  validateCodeKey: '',
  validateCode: '',
});

const codeUrl = ref('');
const isPassWord = ref(false);
const loading = ref(false);
onMounted(() => {
  getCode();
});
const getCode = () => {
  getCaptchaAPi().then((res) => {
    const { image = '', validateCodeKey = '' } = res.data || {};
    codeUrl.value = 'data:image/gif;base64,' + image || '';
    form.validateCodeKey = validateCodeKey || '';
  });
};
const onSubmit = (values) => {
  router.push({ path: '/' });
  return;
  loginAPi(form)
    .then((res) => {
      loading.value = true;
      if (res.code == 200) {
        const { access_token, refresh_token, expires_in } = res.data || {};
        Cookies.set('token', access_token);
        Cookies.set('refresh_token', refresh_token);
        showNotify({ type: 'success', message: res.msg });
        if (route.query.redirect) {
          router.push({ path: route.query.redirect });
        } else {
          router.push({ path: '/' });
        }
      } else {
        getCode();
        loading.value = false;
      }
    })
    .catch((err) => {
      getCode();
      loading.value = false;
    });
};
const onFailed = (errorInfo) => {
  console.log('failed', errorInfo);
};
</script>

<style scoped lang="scss">
.login {
  width: 100%;
  height: 100vh;
  padding: 20px;
  background: linear-gradient(180deg, #0b92fe 0%, rgba(255, 255, 255, 0) 100%);
  .login_box {
    padding: 50px 0;
    position: relative;
    top: 120px;
    width: 100%;
    height: 489px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 23px;
    border-image: linear-gradient(
        180deg,
        rgba(238, 244, 255, 1),
        rgba(148, 188, 255, 0.62),
        rgba(255, 255, 255, 0)
      )
      1 1;
  }
  .app_name {
    font-size: 24px;
    color: #ffffff;
    font-weight: bolder;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin-bottom: 20px;
  }
  // .loading {
  //   position: relative;
  //   left: 50%;
  //   top: 50%;
  //   transform: translate(-50%, -50%);
  // }
}
</style>
